import React from 'react'

// 导入Ui组件
import { Spin, Alert } from 'antd';
// 导入分页组件
import { Pagination } from 'antd';
// 导入fetch-jsonp的包
import fetchJSONP from 'fetch-jsonp'

// 导入电影列表渲染项
import MovieItem from './MovieItem.jsx'


export default class MovieList extends React.Component{
  constructor(props){
    super(props)
    this.state = {
      //电影列表
      movies: [],
      // 当前展示第几页的数据
      nowPage: parseInt(props.match.params.page) || 1,
      // 每页显示的数据条数
      pageSize: 12,
      //当前电影分类下，总共有多少条数据
      total: 0,
      // 数组是否正在加载数据，如果为true表示正在加载
      isLoading: true,
      // 保存要获取的电影的类型
      movieType: props.match.params.type
    }
  }
  componentWillMount(){
    this.loadMovieListByTypeAndPage();
  }

  componentWillReceiveProps(nextProps){
    console.log(nextProps.match)
    // 每当地址栏发生变化后，重置state中的参数，重置完毕后重新发起数据的请求
    this.setState({
      isLoading: true,
      nowPage: parseInt(nextProps.match.params.page) || 1,
      movieType:nextProps.match.params.type
    },function(){
      this.loadMovieListByTypeAndPage()
    })
  }

  render(){
    return <div>
      {this.renderList()}
    </div>
  }
  //根据电类型和电影列表获取数据
  loadMovieListByTypeAndPage = () => {
    //开始获取数据的索引
    const start = this.state.pageSize * (this.state.nowPage -1)
    const url = `https://api.douban.com/v2/movie/${this.state.movieType}?start=${start}&count=${this.state.pageSize}&apikey=0df993c66c0c636e29ecbb5344252a4a`

    // 由于默认的window.fetch受到跨域请求的限制，此时使用第三方包fetch-jsonp来发送JSONP
    // 请求，它的用法同window.fetch完全兼容
    fetchJSONP(url).then(response => response.json()).then((data) => {
      this.setState({
        isLoading: false, // 隐藏loading效果
        movies: data.subjects, //为电影列表重新赋值
        total: data.total //保存总条数
      })
    })
    // const data = require(`../test-data/${this.state.movieType}.json`)
    // setTimeout(() => {
    //   this.setState({
    //     isLoading: false, // 隐藏loading效果
    //     movies: data.subjects, //为电影列表重新赋值
    //     total: data.total, //保存总条数
    //   })
    // },1000)
  }


  renderList = () => {
    if(this.state.isLoading){//
      return <Spin tip="Loading...">
      <Alert
        message="正在请求电影列表"
        description="精彩内容即将呈现"
        type="info"
      />
    </Spin>
    }else{
      return <div>
        <div style={{display:"flex",flexWrap:"wrap"}}>
        {this.state.movies.map(item => {
          return <MovieItem {...item} key={item.id} history={this.props.history}></MovieItem>
        })}
      </div>
      <Pagination defaultCurrent={this.state.nowPage} total={this.state.total} pageSize={this.state.pageSize} onChange={this.pageChanged}/>
      </div>
    }
  }

  // 当页面改变的时候去加载新一页的数据
  pageChanged = (page) => {
  //  使用 react-router-dom实现编程式导航
    this.props.history.push("/movie/" + this.state.movieType + '/' + page)

  }
}



// 在react中我们可以通过fatch API来获取数据，fatch API是基于Promise封装的
// 使用：